<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
  <style>
    .aClass {
      color: red;
    }
    .bClass {
      color: green;
    }
    .cClass {
      font-size: 50px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2>class绑定 :class='xxx'</h2>
    <p :class="a" @click="changeStyle">点击变颜色【绑定字符串】</p>
    <p :class="['aClass', 'cClass']" @click="changeStyle">点击变颜色【绑定数组】</p>
    <p :class="{bClass: isB, aClass: isNotA}" @click="changeStyle">点击变颜色【绑定对象】</p>
    <h2>style绑定</h2>
    <p :style="{color: activeColor, fontSize: fontSize+'px'}" @click="changeState">点击变颜色</p></p>
  </div>
  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        a: 'aClass',
        isB: true,
        isNotA: false,
        activeColor: 'red',
        fontSize: 40
      },
      methods: {
        changeStyle() {
          this.a = this.a === 'aClass'? 'bClass': 'aClass'
        },
        changeState() {
          this.activeColor = this.activeColor==='green'?'red':'green'
          this.fontSize = this.fontSize===40?10:40
        }
      }
    })
  </script>
</body>

</html>